import { Component, OnInit } from '@angular/core';
import {MsgResult} from "../../../../models/msg-result";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {ResponseUtil} from "../../../../util/response-util";
import {ActivatedRoute, Router} from "@angular/router";
import {TraceAnalyzeService} from "./trace-analyze.service";
import {MsgConstants} from "../../../../constants/constants";
import {TraceAnalyze} from "./trace-analyze";
import {AlarmSubject} from "../../../../util/alarm-subject";
import {Subscription} from "rxjs/Subscription";
import {SiteStatusSubject} from '../../../../util/site-status-subject';

declare var $;
declare var BMap;
declare var BMapLib;
declare var INFOBOX_AT_TOP;

@Component({
  selector: 'app-trace-analyze',
  templateUrl: './trace-analyze.component.html',
  styleUrls: ['./trace-analyze.component.css']
})
export class TraceAnalyzeComponent implements OnInit {

  map;
  centerPoint;
  testObj;
  windDirective;
  lastInfo;

  listTypeArr: Array<any> = [];
  nationImg: Array<any> = [];
  smallAirImg: Array<any> = [];
  provinceImg: Array<any> = [];
  factorData: Array<any> = [];
  siteCacheArr: Array<any> = [];

  selectorFactor: string = "AQI";
  selectorPointType: string = "allNationalSite";
  sitePointType: string = "allNationalSite";

  isLoading: boolean = false;

  traceAnalyze : TraceAnalyze;
  occurTime: string = '';
  dataType: string = '';
  siteCode: string = '';
  polygonArr: Array<any> = [];

  private subscription: Subscription;
  private siteStatusSubscript: Subscription;
  private siteStatusObj: any;
  realAlarmDataArr: Array<any> = [];

  constructor(
    private responseUtil: ResponseUtil,
    private dialogService: OneDialogService,
    private router: Router,
    private route: ActivatedRoute,
    private traceAnalyzeService: TraceAnalyzeService,
    private alarmSubject : AlarmSubject,
    private siteStatusSubject : SiteStatusSubject,

  ) {
    this.traceAnalyze = new TraceAnalyze();
  }

  ngOnInit() {
    this.initMap();
    this.screenChange();
    this.initMapContentData();
    this.getUserSite();
    // this.subscribeAlarm();
  }
  ngOnDestroy() {
    this.unSubscribeAlarm();
  }
  /**
   * 数据订阅
   */
  private subscribeAlarm(){
    this.subscription = this.alarmSubject.subscribeData().subscribe(
      (data) => {
        console.log("数据订阅");
        this.realAlarmDataArr = data;
        let siteIndexArr = [];
        let siteArr = [];
        this.realAlarmDataArr.forEach((val,i) => {
          if ( siteIndexArr.indexOf(val.siteCode) == -1 ){
            siteIndexArr.push(val.siteCode);
            siteArr.push(val);
          }
          const alarmElem = $('#'+val.siteCode);
          if(alarmElem.length){
            if ( !alarmElem.hasClass('alarm')) {
              let img = "";
              let pointImg = alarmElem.data("img");
              let pointType = alarmElem.data("point");
              if (pointImg && pointImg.indexOf('alert') == -1) {
                if (alarmElem.hasClass("nationalSite")) {
                  let level = pointImg.split("national")[1];
                  img = 'ico-national-alert' + level;
                } else if ($('#' + data.siteCode).hasClass("smallAirSite")) {
                  let level = pointImg.split("smallAir")[1];
                  img = 'ico-smallAir-alert' + level;
                } else if ($('#' + data.siteCode).hasClass("cityAirSite")) {
                  let level = pointImg.split("province")[1];
                  img = 'ico-province-alert' + level;
                } else {
                  img = 'ico-' + pointType + '-alert';
                }
              } else {
                img = pointImg;
              }
              alarmElem.addClass("alarm").parent().css("background","url(../../../../../assets/v1/css/peach/peachImg/" + img + ") no-repeat");
            }
          }
        });
        siteArr.forEach((val,i)=>{
          this.siteCode = val.siteCode;
          this.getTraceAnalyze(val.siteCode);
        });
      });
  }
  private unSubscribeAlarm(){
    console.log("取消订阅");
    if(this.subscription){
      this.subscription.unsubscribe();
    }
  }

  /**
   * 状态订阅
   */
  private subscribeSiteStatus(){
    this.siteStatusSubscript = this.siteStatusSubject.subscribeData().subscribe(
      (data) => {
        console.log("状态订阅");
        console.log(data);
        this.siteStatusObj = data;
        for(const key in data){
          if(data.hasOwnProperty(key)){
            const alarmElem = $('#'+key);
            console.log(key);
            if(data[key]){
              console.log(data[key]);
              console.log(alarmElem);
              if(alarmElem.hasOwnProperty('length') && !alarmElem.hasClass("alarm")){
                let img = "";
                let pointImg = alarmElem.data("img");
                let pointType = alarmElem.data("point");
                if(pointImg &&　pointImg.indexOf('alert') == -1){
                  if(alarmElem.hasClass("nationalSite")){
                    let level = pointImg.split("national")[1];
                    img = 'ico-national-alert'+level;
                  }else if($('#'+data.siteCode).hasClass("smallAirSite")){
                    let level = pointImg.split("smallAir")[1];
                    img = 'ico-smallAir-alert'+level;
                  }else if($('#'+data.siteCode).hasClass("cityAirSite")){
                    let level = pointImg.split("province")[1];
                    img = 'ico-province-alert'+level;
                  }else{
                    img = 'ico-'+pointType+'-alert';
                  }
                }else{
                  img = pointImg;
                }
                alarmElem.addClass("alarm").parent().css("background","url(../../../../../assets/v1/css/peach/peachImg/" + img + ") no-repeat");
              }
            }
          }
        }
      }
    );
  }
  private unSubscribeSiteStatus(){
    console.log("取消状态订阅");
    if(this.siteStatusSubscript){
      let cloneStatusObj = {};
      for(const key in this.siteStatusObj){
        if(this.siteStatusObj.hasOwnProperty(key)){
          cloneStatusObj[key] = this.siteStatusObj[key];
        }
      }
      this.siteStatusSubject.pushData(cloneStatusObj);
      this.siteStatusSubscript.unsubscribe();
    }
  }
  /**
   * 初始化地图
   */
  initMap() {
    $("#realTimeMap").css("height", window.innerHeight - 50 + "px");
    $(".one-notbreadcrumb").css("height",window.innerHeight-50+"px");
    this.map = new BMap.Map("realTimeMap", {enableMapClick: false, minZoom: 5, maxZoom: 18});
    let centerPoint = new BMap.Point(113.658221, 34.780377);  // 创建点坐标
    this.map.centerAndZoom(centerPoint, 12);
    // 地图样式
    let mapStyle =[
      {
        "featureType": "land",
        "elementType": "geometry",
        "stylers": {
          "color": "#e7f7fc"
        }
      },
      {
        "featureType": "water",
        "elementType": "all",
        "stylers": {
          "color": "#96b5d6"
        }
      },
      {
        "featureType": "green",
        "elementType": "all",
        "stylers": {
          "color": "#b0d3dd"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#d1c6a6"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#e6d9ab"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#eeeeee"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#cccccc"
        }
      },
      {
        "featureType": "local",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#eeeeee"
        }
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#b6c6de"
        }
      },
      {
        "featureType": "subway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "green",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#cddbd2"
        }
      },
      {
        "featureType": "land",
        "elementType": "all",
        "stylers": {
          "color": "#edf1f5"
        }
      },
      {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": {
          "color": "#a7c8ec"
        }
      },
      {
        "featureType": "railway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      }
    ];//白底
    this.map.setMapStyle({styleJson: mapStyle});
    this.map.enableScrollWheelZoom();
    this.map.enableDragging();
  }
  /**
   * 屏幕大小改变
   */
  screenChange(){
    $(window).resize(function(){
      $("#realTimeMap").css("height", window.innerHeight - 50 + "px");
      $(".one-notbreadcrumb").css("height",window.innerHeight-50+"px");
    });
  }
  initMapContentData(){
    this.siteCode = '410100052';
    this.occurTime = '2017-09-20 15:00:00';
    this.dataType = 'real';
    this.centerPoint = new BMap.Point(113.658221, 34.780377); //郑州
    this.nationImg = ["ico-national1.png", "ico-national2.png", "ico-national3.png", "ico-national4.png", "ico-national5.png", "ico-national6.png", "ico-national-alert7.png"];
    this.smallAirImg = ["ico-smallAir1.png", "ico-smallAir2.png", "ico-smallAir3.png", "ico-smallAir4.png", "ico-smallAir5.png", "ico-smallAir6.png", "ico-smallAir-alert7.png"];
    this.factorData = [{name:"实时AQI",factorName:"AQI"}, {name:"实时PM10",factorName:"PM10"}, {name:"实时PM2.5",factorName:"PM2.5"}, {name:"实时SO2",factorName:"SO2"}, {name:"实时NO2",factorName:"NO2"}, {name:"实时CO",factorName:"CO"}, {name:"实时O3",factorName:"O3"},{name:"温度",factorName:"TEMP"},{name:"湿度",factorName:"HUM"},{name:"风力风向",factorName:"WIND"}];
    this.provinceImg = ["ico-province1.png", "ico-province2.png", "ico-province3.png", "ico-province4.png", "ico-province5.png", "ico-province6.png", "ico-province-alert7.png"];
    this.windDirective = {"N":{name:"北风",direct:0},"NE":{name:"东北风",direct:45},"NW":{name:"西北风",direct:315},"E":{name:"东风",direct:90},"W":{name:"西风",direct:270},"S":{name:"南风",direct:180},"SE":{name:"东南风",direct:135},"SW":{name:"西南风",direct:225},"ESWN":{name:"旋风",direct:0}};
  }
  /**
   * 获取用户包含的站点信息
   */
  getUserSite(){
    this.traceAnalyzeService.getUserSite().subscribe(
      result => this.responseUtil.success(result, this.handleUsetSiteResult),
      message => this.responseUtil.error(message)
    )
  }
  private handleUsetSiteResult = (result: MsgResult) => {
    this.isLoading = false;
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.progressUserSite(result.data);
    } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  };
  progressUserSite(data){
    if(data.length){
      if(data.indexOf("allNationalSite")!=-1){
        this.listTypeArr.push({"pointType": "nationalSite", "name": "国控站"});
        this.listTypeArr.push({"pointType": "cityAirSite", "name": "市控站"});
        this.listTypeArr.push({"pointType": "allNationalSite", "name": "标准站"});
        // this.getMapSiteInfo('cityAirSite');
      }
      data.indexOf("smallAirSite")!=-1 && this.listTypeArr.push({"pointType": "smallAirSite", "name": "微型站"});
      data.indexOf("industrySite")!=-1 && this.listTypeArr.push({"pointType": "industrySite", "name": "工业废气"});
      data.indexOf("raiseDustSite")!=-1 && this.listTypeArr.push({"pointType": "raiseDustNewSite", "name": "工地"});
      this.listTypeArr.push({"pointType": "movingSource", "name": "移动源"});
      this.selectorPointType = this.listTypeArr[0].pointType;
      this.sitePointType = this.selectorPointType;
      this.getMapSiteInfo(this.selectorPointType);
    }else{
      this.dialogService.info("暂无站点类型");
    }
  }
  /**
   * 获取站点信息
   */
  getMapSiteInfo(pointType) {
    this.traceAnalyzeService.getMapSiteData(pointType).subscribe(
      result => this.responseUtil.success(result, (result:MsgResult)=>{
        this.isLoading = false;
        if (result && result.code == MsgConstants.MSG_CODE_OK) {
          this.batchAddSite(result.data,pointType);
          if(pointType == 'nationalSite'){
            this.subscribeAlarm();
          }
        } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
          this.dialogService.info(result.message);
        }
      }),
      message => this.responseUtil.error(message)
    )
  }
  batchAddSite = (data,pointType) => {
    if (data && data.hasOwnProperty("siteList") && data.siteList.length) {
      let center;
      if(data.centerSite.lng && data.centerSite.lat){
        center = data.centerSite;
      }else{
        center = data.siteList[0];
      }
      let centerPoint;
      if (center.hasOwnProperty("Longitude")) {
        centerPoint = new BMap.Point(center.Longitude, center.Latitude);  // 创建点坐标
      } else {
        centerPoint = new BMap.Point(center.lng, center.lat);  // 创建点坐标
      }
      this.map.centerAndZoom(centerPoint, this.map.getZoom());
      if (data.siteList.length) {
        let lowerFactor = this.selectorFactor.toLowerCase();
        lowerFactor == "pm2.5" && (lowerFactor="pm25");
        data.siteList.forEach((dataObj, i) => {
          dataObj.pointType = pointType;
          dataObj.factor = lowerFactor;
          this.mapLabel(dataObj);
        });
        $("#"+this.siteCode).addClass('one-map-marker-site-hint');
        if(pointType == "nationalSite" ){
          lowerFactor == "wind" && (lowerFactor="windSpeed");
          this.siteCacheArr = data.siteList.sort(this.compare(lowerFactor));
        }
      }
    }
  };
  compare = (prop) => {
    return function (obj1, obj2) {
      let val1 = obj1[prop];
      let val2 = obj2[prop];
      if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
        val1 = Number(val1);
        val2 = Number(val2);
      }else{
        val1 = String(val1);
        val2 = String(val2);
      }
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        return 0;
      }
    }
  };
  /**
   * 站点标注
   */
  mapLabel(dataObj) {
    let point = new BMap.Point(dataObj.Longitude, dataObj.Latitude);
    let size, factorNum;
    let windHtml :string  = "";
    let wind : string = "";
    let windDeg :  number = 0;
    if(dataObj.windDirection &&　dataObj.windDirection!="-"){
      wind = dataObj.windDirection;
      if(this.windDirective.hasOwnProperty(wind)){
        windDeg = this.windDirective[wind].direct;
        dataObj.windDirection = this.windDirective[wind].name;
      }
    }
    if (dataObj.siteStatus == "1111") {
      if(dataObj.pointType == "nationalSite" || dataObj.pointType == "allNationalSite"){
        if(dataObj.factor == "wind"){
          factorNum = "";
          windHtml = '<span class="one-map-peach-wind" style="transform: rotate('+windDeg+'deg)"></span>';
          dataObj.activeNum = dataObj.windSpeed;
        }else{
          factorNum = dataObj[dataObj.factor];
          dataObj.activeNum = factorNum;
        }
        let i = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(factorNum,dataObj.factor) - 1;
        dataObj.className ="one-bg-level" + (i + 1);
        dataObj.img = this.nationImg[i];
        size = [53, 49];
      }else if(dataObj.pointType == "cityAirSite"){
        factorNum = "";
        let j = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
        dataObj.img = this.provinceImg[j];
        size = [20, 20];
      }else if(dataObj.pointType == "smallAirSite"){
        factorNum = "";
        let k = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
        dataObj.img = this.smallAirImg[k];
        size = [20, 20];
      }else {
        factorNum = "";
        dataObj.img = "ico-" + dataObj.pointType + ".png";
        dataObj.className = "one-bg-level-default";
        size = [20, 20];
      }
    } else {
      if(dataObj.pointType == "nationalSite" || dataObj.pointType == "allNationalSite"){
        dataObj.img = "ico-national-alert7.png";
        size = [40, 47];
      }else if(dataObj.pointType == "cityAirSite"){
        dataObj.img = "ico-province-alert7.png";
        size = [20, 20];
      }else if(dataObj.pointType == "smallAirSite"){
        dataObj.img = "ico-smallAir-alert7.png";
        size = [20, 20];
      }else{
        dataObj.img = "ico-" + dataObj.pointType + "-alert.png";
        size = [20, 20];
      }
      factorNum = dataObj.pointType == "nationalSite" ? "-" : "";
      dataObj.className = "one-bg-level7";
      dataObj.activeNum = "-";
    }
    let offset,labelNameHtml = "";
    if(dataObj.pointType == "nationalSite"){
      offset =  new BMap.Size(-size[0] / 2, -size[1]+6);
      let i = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor): this.polluteLevel(factorNum,dataObj.factor);
      labelNameHtml = "<div class='one-peach-site-label-name one-border-level"+i+"'>" + dataObj.siteName + "</div>";
    }else{
      offset = new BMap.Size(-size[0] / 2, -size[1]/2) ;
    }
    let alarmClass = '';
    this.realAlarmDataArr.forEach((val,i)=>{
      if(val.siteCode == dataObj.siteCode){
        if(dataObj.img.indexOf('alert') == -1){
          if(dataObj.pointType == "nationalSite"){
            let level = dataObj.img.split("national")[1];
            dataObj.img = 'ico-national-alert'+level;
            alarmClass = 'alarm'
          }else if(dataObj.pointType == "smallAirSite"){
            let level = dataObj.img.split("smallAir")[1];
            dataObj.img = 'ico-smallAir-alert'+level;
            alarmClass = 'alarm'
          }else if(dataObj.pointType == "cityAirSite"){
            let level = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
            dataObj.img = 'ico-province-alert'+level;
            alarmClass = 'alarm'
          }
        }
      }
    });
    let myLabel = new BMap.Label(labelNameHtml+windHtml+"<span id='" + dataObj.siteCode + "' class='" + dataObj.pointType + ' ' + alarmClass +" labelData" + "' style='color:#fff;display: inline-block;' data-point='"+dataObj.pointType+"' data-img='"+dataObj.img+"'>" + factorNum + "</span>",    //为lable填写内容
      {
        offset: offset,                     //label的偏移量，为了让label的中心显示在点上
        position: point
      });                                //label的位置
    myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的
      maxWidth: size[0] + "px",
      width: size[0] + "px",  //宽
      display: "inline-block",
      fontSize: "14px",               //字号
      border: "0",                    //边
      height: size[1] + "px",                //高度
      textAlign: "center",            //文字水平居中显示
      lineHeight: size[1] - 8 + "px",
      background: "url(../../../../../assets/v1/css/peach/peachImg/" + dataObj.img + ") no-repeat",    //背景图片
      cursor: "pointer"
    });
    let title = "";
    title = dataObj.siteName;
    myLabel.disableMassClear();
    myLabel.setTitle(title);//为label添加鼠标提示
    this.map.addOverlay(myLabel);
    myLabel.addEventListener("click", (e) => {
      let paramsObj = {siteCode: dataObj.siteCode, time: dataObj.monitorTime, alert : false};
      if ( e.target.content.indexOf('alert') != -1 ) {
        paramsObj.alert = true;
      }
      this.router.navigate(['./analyzeChart',paramsObj ],{relativeTo: this.route});
    })
  }
  /**
   * aqi等级
   */
  aqiLevel = (data) => {
    return data <= 50 ? 1
      : data > 50 && data <= 100 ? 2
        : data > 100 && data <= 150 ? 3
          : data > 150 && data <= 200 ? 4
            : data > 200 && data <= 300 ? 5
              : data > 300 ? 6 : 7;
  };
  /**
   * pollute等级
   */
  polluteLevel = (data,type) =>{
    let levelArr = [];
    if (type == "pm10") {
      levelArr = [50, 150, 250, 350, 500]
    } else if (type == "pm25") {
      levelArr = [35, 75, 115, 150, 250]
    } else if (type == "so2") {
      levelArr = [150, 500, 650, 800, 1600]
    } else if (type == "no2") {
      levelArr = [100, 200, 700, 1200, 2340]
    } else if (type == "co") {
      levelArr = [5, 10, 35, 60, 90]
    } else if (type == "o3") {
      levelArr = [160, 200, 300, 400, 800, 1200]
    } else if (type == "hum") {
      levelArr = [20, 40, 60, 80, 100]
    } else if (type == "temp") {
      levelArr = [0, 8, 16, 24, 32]
    } else if (type == "wind") {
      levelArr = [1, 2, 3, 4, 5, 6];
    } else {
      levelArr = [50, 100, 150, 200, 300];
    }
    return data <= levelArr[0] ? 1
      : data > levelArr[0] && data <= levelArr[1] ? 2
        : data > levelArr[1] && data <= levelArr[2] ? 3
          : data > levelArr[2] && data <= levelArr[3] ? 4
            : data > levelArr[3] && data <= levelArr[4] ? 5
              : data > levelArr[4] ? 6 : 7;
  };

  getTraceAnalyze(siteCode){
    this.traceAnalyzeService.getTraceAnalyze(siteCode,this.dataType).subscribe(
      result => this.responseUtil.success(result, ( result: MsgResult ) => {
        this.map.getOverlays().forEach( (overlay) => {
          if(overlay.hasOwnProperty('content') && overlay.content){
            if ( overlay.content.indexOf('nationalSite') == -1 && overlay.content.indexOf(siteCode) != -1 ) {
              this.map.removeOverlay(overlay);
            }else{

            }
          }
        });
        this.polygonArr.forEach( (polygon) => {
          if(polygon.siteCode == siteCode){
            this.map.removeOverlay(polygon.ply);
          }
        });
        if (result && result.code == MsgConstants.MSG_CODE_OK) {
          if(result.data && result.data.hasOwnProperty('standSite')){
            let traceAnalyze = result.data;
            if(traceAnalyze.hasOwnProperty('calculate') && traceAnalyze.calculate.hasOwnProperty('place') && traceAnalyze.calculate.place && traceAnalyze.calculate.place.length > 0 ){
              let pointArr = [];
              traceAnalyze.calculate.place.forEach((val,i)=>{
                pointArr.push(new BMap.Point(val[0],val[1]))
              });
              let polygon = new BMap.Polygon(pointArr, {fillColor:"#ad49e2", strokeColor:"transparent",strokeWidth:0, fillOpacity:0.28});  //创建多边形
              this.polygonArr.push({siteCode:siteCode,ply:polygon});
              this.map.addOverlay(polygon);   //增加多边形
            }
            this.addTraceSite('smallSite',traceAnalyze,siteCode);
            this.addTraceSite('pollution',traceAnalyze,siteCode);
            this.addTraceSite('raiseDust',traceAnalyze,siteCode);
          }else{
            this.dialogService.info('暂无数据');
          }
        } else if (result && result.code != MsgConstants.MSG_CODE_OK) {
          this.dialogService.info(result.message);
        }
      }),
      message => this.responseUtil.error(message)
    )
  }
  addTraceSite(pointType,traceAnalyze,siteCode){
    if(traceAnalyze.hasOwnProperty(pointType) && traceAnalyze[pointType] && traceAnalyze[pointType].length > 0 ){
      let sitePointType = '';
      if ( pointType == 'smallSite' ) {
        sitePointType = 'smallAirSite'
      } else if ( pointType == 'raiseDust' ) {
        sitePointType = 'raiseDustNewSite'
      } else if ( pointType == 'pollution' ) {
        sitePointType = 'industrySite';
      }
      traceAnalyze[pointType].forEach((val,i)=>{
        val.pointType = sitePointType;
        this.mapAlertLabel(val,siteCode);
      })
    }
  }

  /**
   * 站点标注
   */
  mapAlertLabel(dataObj,siteCode) {
    let point = new BMap.Point(dataObj.loc[0], dataObj.loc[1]);
    let data = [];
    let size, factorNum;
    let windHtml :string  = "";
    let wind : string = "";
    if (dataObj.pointType) {
      if(dataObj.pointType == "smallAirSite"){
        factorNum = "";
        let k = dataObj.factor == "wind"? this.polluteLevel(dataObj.windSpeed,dataObj.factor) - 1: this.polluteLevel(dataObj[dataObj.factor],dataObj.factor) - 1;
        dataObj.img = this.smallAirImg[k];
        size = [20, 20];
      }else {
        factorNum = "";
        dataObj.img = "ico-" + dataObj.pointType + ".png";
        dataObj.className = "one-bg-level-default";
        size = [20, 20];
      }
    } else {
      if(dataObj.pointType == "smallAirSite"){
        dataObj.img = "ico-smallAir-alert7.png";
        size = [20, 20];
      }else{
        dataObj.img = "ico-" + dataObj.pointType + "-alert.png";
        size = [20, 20];
      }
      factorNum = dataObj.pointType == "nationalSite" ? "-" : "";
      dataObj.className = "one-bg-level7";
      dataObj.activeNum = "-";
    }
    let offset = new BMap.Size(-size[0] / 2, -size[1]/2) ,labelNameHtml = "";
    let myLabel = new BMap.Label(labelNameHtml+windHtml+"<span id='" + dataObj.siteCode + "' class='" + dataObj.pointType + ' ' + siteCode + " labelData" + "' style='color:#fff;display: inline-block;' data-point='"+dataObj.pointType+"' data-img='"+dataObj.img+"'>" + factorNum + "</span>",    //为lable填写内容
      {
        offset: offset,                     //label的偏移量，为了让label的中心显示在点上
        position: point
      });                                //label的位置
    myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的
      maxWidth: size[0] + "px",
      width: size[0] + "px",  //宽
      display: "inline-block",
      fontSize: "14px",               //字号
      border: "0",                    //边
      height: size[1] + "px",                //高度
      textAlign: "center",            //文字水平居中显示
      lineHeight: size[1] - 8 + "px",
      background: "url(../../../../../assets/v1/css/peach/peachImg/" + dataObj.img + ") no-repeat",    //背景图片
      cursor: "pointer"
    });
    let title = "";
    title = dataObj.siteName;
    myLabel.setTitle(title);               //为label添加鼠标提示
    this.map.addOverlay(myLabel);
    myLabel.addEventListener("click", () => {
      if ( dataObj.pointType !== 'nationalSite' || dataObj.pointType !== 'cityAirSite' ) {
        this.siteDetailInfo(dataObj);
      } else {
        this.router.navigate(['./analyzeChart', {siteCode: dataObj.siteCode}],{relativeTo: this.route});
      }
    })
  }

  /**
   *标注点击事件
   */
  siteDetailInfo(dataObj) {
    let siteDataHtml = "";
    if (dataObj.pointType == "smallAirSite" || dataObj.pointType == "nationalSite" || dataObj.pointType == "cityAirSite") {
      siteDataHtml = this.allNationSiteSmallHtml(dataObj);
    } else if (dataObj.pointType == "industrySite") {
      siteDataHtml = this.industrySiteHtml(dataObj)
    } else if (dataObj.pointType == "raiseDustNewSite") {
      siteDataHtml = this.raiseDustHtml(dataObj);
    } else {

    }
    if (this.lastInfo) {
      this.lastInfo.close();
    }
    let offset;
    if (dataObj.pointType == "nationalSite") {
      offset = new BMap.Size(30, 38);
    } else {
      offset = new BMap.Size(18, 16);
    }
    let infoBox = new BMapLib.InfoBox(this.map, siteDataHtml, {
      boxStyle: {
        background: "#fff",
        width: "360px"
      },
      offset: offset,
      closeIconMargin: "13px 7px 0 0",
      enableAutoPan: true,
      align: INFOBOX_AT_TOP,
      closeIconUrl: "../../../../../../assets/imgs/ico-close.png"
    });
    this.lastInfo = infoBox;
    let point = new BMap.Point(dataObj.loc[0], dataObj.loc[1]);
    infoBox.open(point);
  }

  /**
   *标准站/小型站详细信息
   */
  allNationSiteSmallHtml = (dataObj) => {
    dataObj.aqiLevelType = dataObj.aqiLevelType ? dataObj.aqiLevelType : "-";
    dataObj.aqiLevelType = dataObj.aqiLevel == '1'?'优':dataObj.aqiLevel == '2'?'良':dataObj.aqiLevel == '3'?'轻度污染':dataObj.aqiLevel == '4'?'中度污染':dataObj.aqiLevel == '5'?'严重污染':dataObj.aqiLevel == '6'?'重度污染':' ';
    let data = dataObj.monitorData;
    return`   
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
      </div>  
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">    
          <div class="one-peach-info-content-header"><span>AQI：${data.aqi}</span><span class="one-bg-level${this.aqiLevel(data.aqi)} text-center">${dataObj.aqiLevelType}</span></div>  
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-factor">
              <li>
                <div>PM2.5</div>
                <div><span class="one-bg-level${this.polluteLevel(data.pm25,'pm25')}"></span><span>${data.pm25}</span></div>
              </li>
              <li>
                <div>PM10</div>
                <div><span class="one-bg-level${this.polluteLevel(data.pm10,'pm10')}"></span><span>${data.pm10}</span></div>
              </li>
              <li>
                <div>NO<sub>2</sub></div>
                <div><span class="one-bg-level${this.polluteLevel(data.no2,'no2')}"></span><span>${data.no2}</span></div>
              </li>
              <li>
                <div>SO<sub>2</sub></div>
                <div><span class="one-bg-level${this.polluteLevel(data.so2,'so2')}"></span><span>${data.so2}</span></div>
                
              </li>
              <li>
                <div>CO</div>
                <div><span class="one-bg-level${this.polluteLevel(data.co,'co')}"></span><span>${data.co}</span></div>
              </li>
              <li>
                <div>O<sub>3</sub></div>
                <div><span class="one-bg-level${this.polluteLevel(data.o3,'o3')}"></span><span>${data.o3}</span></div>
              </li>  
            </ul> 
          </div>
        </div>
      </div>
    </div>
    `;
  };
  /**
   *工业废气详细信息
   */
  industrySiteHtml = (dataObj) => {
    let data = dataObj.monitorData;
    return `
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
      </div>  
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-device">  
              <li>
                <div>烟尘</div>
                <div><span>${data.AvgStrength001}</span></div>
              </li>
              <li>  
                <div>SO<sub>2</sub></div>
                <div><span>${data.AvgStrength002}</span></div>
              </li>
              <li>
                <div>NO<sub>x</sub></div>
                <div><span>${data.AvgStrength003}</span></div>     
              </li>
            </ul>   
          </div>
        </div>
      </div>
    </div>
    `;
  };
  /**
   * 扬尘详细信息
   * @param dataObj
   * @returns {string}
   */
  raiseDustHtml = (dataObj) => {
    let data = dataObj.monitorData;
    return `
    <div class="one-peach-info">
      <div class="one-peach-info-header">
        <span>${dataObj.siteName}</span>
      </div>   
      <div class="one-peach-info-body">
        <div class="one-peach-info-content">
          <div class="one-peach-info-content-body">
            <ul class="list-inline one-peach-content-device"> 
              <li>
                <div>PM10</div>
                <div><span>${data.pm10}</span></div>
              </li>
              <li>
                <div>PM2.5</div>
                <div><span>${data.pm25}</span></div>
              </li>
              <li>
                <div>喷淋装置</div>
                <div><span>正常</span></div>     
              </li>
              <li>
                <div>联动控制器</div>
                <div><span>开</span></div>        
              </li>
            </ul>
            <ul class="list-inline one-peach-content-weather">
              <li>
                <div>温度：${data.temp}&degC</div>
              </li>
              <li>
                <div>湿度：${data.hum}%</div>
              </li>
              <li>
                <div>风力：${data.ws}级</div>   
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    `;
  };

}
